<template>
  <div>
    <!-- 面包屑导航 -->
    <BreadCrumb></BreadCrumb>
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="员工姓名">
            <el-input v-model="formInline.name" size="small" placeholder="员工姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加员工</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
       :row-class-name="tableRowClassName"
        :data="tableData"
        @select="selectHandle"
        @select-all="selectHandle"
        style="width: 100%" border :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
          align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          prop="createTime"
          label="创建时间"
          width="260">
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          prop="username"
          label="员工名"
          width="220">
          <template slot-scope="scope">
            <span style="color: blue;cursor: pointer;" @click="handleLook(scope.$index,scope.row)">
              {{ scope.row.username }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          prop="name"
          label="姓名"
          width="220">
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          prop="gender"
          label="性别"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.gender==1">
              男
            </span>
            <span v-else>
              女
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
            v-if="scope.row.status==1"
              icon="el-icon-warning"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">冻结</el-button>
              <el-button
              v-if="scope.row.status==0"
              icon="el-icon-warning"
              size="mini"
              type="success"
              @click="handleDelete(scope.$index, scope.row)">解冻</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <Pagination :total="total" :pageSize="pageSize" :page="page" @CurrentChange="getRecords" obj="admin"></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination  from '@/components/pagination/myPagination.vue';
import axios from 'axios' 
export default {
  components:{
    Pagination
  },
  data(){
    return{
      total:60,
      pageSize:6,
      page:1,
      formInline: {
        name: ''
      },
      tableData: []
    }
  },
  mounted(){
    axios({
      url:`http://localhost:8080/kfc/admin/employee/page?page=${this.page}&pageSize=${this.pageSize}`,
      method:'get',
      headers:{
        token:localStorage.getItem('jwt')
      }
    }).then(res=>{
      this.tableData=res.data.data.employeeList
    })
  },
  methods:{
    tableRowClassName({row}) {
      if(row.status==0){
        return 'warning-row'
      }
    },
    getRecords(val){
      this.tableData=val
    },
    selectHandle(selection){
      console.log(selection);
    },
    onSubmit() {
      axios({
      url:`http://localhost:8080/kfc/admin/employee/page?page=${this.page}&pageSize=${this.pageSize}&name=${this.formInline.name}`,
      method:'get',
      headers:{
        token:localStorage.getItem('jwt')
      },
    }).then(res=>{
      this.tableData=res.data.data.employeeList
    })
      console.log('submit!', this.formInline.name);
    },
    handleEdit(index, row) {
        console.log(index, row);
        // 跳转编辑页面
        this.$router.push({
          name:'adminPage',
          params:{
            id:row.id,
            type:'update'
          }
        })
      },
    handleDelete(index, row) {
      console.log(index, row);
      if(this.tableData[index].status==0){
        this.tableData[index].status=1
      }
      else{
        this.tableData[index].status=0
      }
      this.tableRowClassName
      axios({
        url:`http://localhost:8080/kfc/admin/employee/status?id=${row.id}`,
        method:'post',
        headers:{
          token:localStorage.getItem('jwt')
        },
      })
      // axios({
      //   url:`http://localhost:8080/polycystic/goods/delete?ids=${row.id}`,
      //   method:'delete',
      //   headers:{
      //     token:localStorage.getItem('jwt')
      //   }
      // }).then(res=>{
      //   if(res.status==200){
      //     this.$message({
      //         type:'success',
      //         message:'删除成功'
      //     })
      //     axios({
      //       url:'http://localhost:8080/polycystic/goods/list',
      //       method:'get',
      //       headers:{
      //         token:localStorage.getItem('jwt')
      //       }
      //     }).then(res=>{
      //       this.tableData=res.data.data
      //     })
      //   }
      //   else{
      //     this.$message.error('删除失败');
      //   }
      // })
    },
    toProductPage(){
      this.$router.push({
        name:'adminPage',
        params:{
          type:'add'
        }
      })
    },
    // 查看商品详情
    handleLook(index,row){
      this.$router.push({
        name:'adminPage',
        params:{
          type:'look',
          id:row.id
        }
      })
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
</style>

<style lang="less" scoped>
  .header{
    background: #FFF;
    margin-bottom: 20px;
    padding: 10px;
    .el-form-item{
      margin-bottom: 16px;
    }
    .group{
      border: 1px solid #eee;
      padding: 8px;
    }
  }
  .content{
    background: #FFF;
    .pagination{
      padding: 10px;
    }
  }
</style>